<!--
 * @Author: your name
 * @Date: 2021-08-17 18:58:43
 * @LastEditTime: 2021-08-19 09:43:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sks-quote-web\src\views\benchmark\assigned.vue
-->
<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item>
        <el-button type="primary" size="mini" @click="getAdd"
          >新增用户</el-button
        >
      </el-form-item>
      <el-dialog
        :titletype="titletype"
        :visible.sync="dialogVisibleOne"
        width="60%"
      >
        <el-form-item prop="status">
          <el-input
            placeholder="请输入搜索关键字"
            v-model="page1.userName"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="addhandleQuery"
          >
            搜索</el-button
          >
        </el-form-item>
        <el-form-item label="">
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
        <el-table
          ref="singleTable"
          :data="newarr"
          highlight-current-row
          style="width: 100%; margin-bottom: 10px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column align="center" label="ID" type="index" />

          <el-table-column align="center" prop="nickName" label="名称">
          </el-table-column>

          <el-table-column align="center" label="号码" prop="phonenumber">
          </el-table-column>
          <el-table-column align="center" label="用户名" prop="userName">
          </el-table-column>
          <el-table-column align="center" label="邮箱" prop="email">
          </el-table-column>
        </el-table>
        <!-- v-if="titletype != '3'" -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleOne = false">取 消</el-button>
          <el-button type="primary" @click="addEditBtn">新增</el-button>
        </div>
        <!-- v-if="(titletype = '3')"s -->
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleOne = false">取消</el-button>
        </div> -->
        <!-- 分页 -->
        <!-- @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="total" -->

        <el-pagination
          class="paginationtop"
          @current-change="handleCurrentChange1"
          @size-change="handleSizeChange1"
          :page-sizes="[1, 2, 3, 4, 5, 10, 15]"
          :page-size="page1.pageSize"
          :total="total1"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-dialog>

      <!-- //修改上级用户 -->
      <el-dialog :visible.sync="dialogVisib" width="30%">
        <el-form ref="addEditform" :rules="usernameform" :model="usernameform">
          <el-form-item label="基准名称：" prop="userName">
            <!-- @change="changeType" -->

            <el-select v-model="usernameform.userName" placeholder="请选择">
              <el-option
                v-for="item in namelist"
                :key="item.index"
                :label="item.datumName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- v-if="titletype != '3'" -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisib = false">取 消</el-button>
          <el-button type="primary" @click="addEditBtn1">修改</el-button>
        </div>
      </el-dialog>
      <el-form-item prop="status">
        <el-input
          placeholder="请输入搜索关键字"
          v-model="page.userName"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >
          搜索</el-button
        >
      </el-form-item>
      <el-form-item label="">
        <el-button @click="resetForm1()">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%; margin-bottom: 10px"
    >
      <el-table-column width="150" align="center" label="ID" prop="id" />

      <el-table-column width="150" align="center" prop="nickName" label="名称">
      </el-table-column>

      <el-table-column
        align="center"
        width="150"
        label="号码"
        prop="phonenumber"
      >
        <!-- <template slot-scope="scope">
          {{ scope.row.countCost.toFixed(2) }}
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        width="150"
        label="用户名"
        prop="userName"
      >
      </el-table-column>

      <el-table-column align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" @click="editBtn(scope.row)">
            编辑</el-button
          >
          <el-button
            icon="el-icon-delete-solid"
            @click="handleDelete(scope.row)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 预览 -->
    <el-dialog title="报价预览" :visible.sync="dialogVisibleTwo" width="80%">
      <div style="height: 50px; textalign: center">
        <h3>{{ quotoTitle }}</h3>
      </div>
      <div style="width: 80%; marginleft: 10%">
        <table>
          <tr>
            <td>区域</td>
            <td>展项</td>
            <td>产品名称</td>
            <!-- <td>产品尺寸</td> -->
            <td>产品型号</td>
            <!-- <td>产品单价</td> -->
            <td>产品数量</td>
            <td>产品参数</td>
            <td>单位</td>
            <th>未税单价</th>
            <th>未税合计</th>
            <th>税金</th>
            <th>未税成本</th>
            <th>未税成本总价</th>
          </tr>
          <tr v-for="item in list" :key="item.id">
            <td :rowspan="item.areaNamect" v-if="item.areaNameshow">
              {{ item.areaName }}
            </td>
            <td :rowspan="item.displayNamect" v-if="item.displayNameshow">
              {{ item.displayName }}
            </td>
            <td>{{ item.productName }}</td>
            <td>{{ item.model }}</td>
            <td>{{ item.productCount }}</td>
            <td>
              <el-popover
                popper-class="bgc"
                placement="top-start"
                trigger="hover"
                :content="item.param"
              >
                <div style="height: 150px" class="overCell" slot="reference">
                  {{ item.param }}
                </div>
              </el-popover>
            </td>
            <td>{{ item.unit }}</td>
            <td>{{ item.userPrice }}</td>
            <td>{{ item.userPriceCount }}</td>
            <td>{{ item.taxes }}</td>
            <td>{{ item.customerPrice }}</td>
            <td>{{ item.customerPriceCount }}</td>
          </tr>
          <tr>
            <td :colspan="7">合计</td>
            <td :colspan="3">{{ TotalPriceList.noTexSum }}</td>

            <td></td>
            <td>{{ TotalPriceList.costSum }}</td>
          </tr>
          <tr>
            <td :colspan="7">税金(13%)</td>
            <td :colspan="3">{{ TotalPriceList.noTexCount }}</td>

            <td></td>
            <td>{{ TotalPriceList.costTexCount }}</td>
          </tr>
          <tr>
            <td :colspan="7">含税总计</td>
            <td :colspan="3">{{ TotalPriceList.texSum }}</td>

            <td></td>
            <td>{{ TotalPriceList.costCount }}</td>
          </tr>
        </table>
      </div>
      <div class="footer">
        <!-- <div class="title">合计:{{ totalPrice }}元</div> -->
        <el-button
          style="margin: 0px 100px"
          type="primary"
          size="mini"
          plain
          @click="goHome"
          >退出</el-button
        >
      </div>
    </el-dialog>
    <!-- table -->

    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="[1, 2, 3, 4, 5, 10, 15]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  datumUserList,
  updateDatumUser,
  addDatumUser,
  alllist,
  editdatum,
  deldatum,
  quoteList,
} from "@/api/banch/assigned";
export default {
  name: "Dept",
  data() {
    return {
      userListall: [],
      usernameform: {
        datumId: "",
        userName: "",
        userId: "",
      },
      urlid: "", //urlid
      namelist: [],
      //data
      addEditform: {
        id: "",
        datum: "",
        datumName: "",
        remark: "",
      },

      allid: [],

      TotalPriceList: [],
      list: [],
      options: [
        {
          value: 1,
          label: "展厅预算",
        },
        {
          value: 2,
          label: "大屏预算",
        },
        {
          value: 3,
          label: "弱点项目预算",
        },
      ],
      priviewList: [],

      quotoTitle: "",
      addEditformRules: {
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        datumName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        datum: [
          {
            required: true,
            message: "指标保留2位小数",
            trigger: "blur",
            pattern: /^\d+.?\d{0,2}$/,
          },
        ],
      },
      totalPrice: 0,
      total: 0,
      total1: 0,
      page: {
        pageNum: 1,
        pageSize: 5,
        datumId: "",

        userName: "",
      },
      page1: {
        pageNum: 1,
        pageSize: 5,
        userName: "",
      },
      page3: {
        pageNum: 1,
        pageSize: 5,
        userName: "",
      },
      dialogVisibleOne: false,
      dialogVisib: false,
      dialogVisibleTwo: false,
      tableData: [],
      tableData1: [],
      newarr: [],
      tableDataTwo: [],
      quoteTitle: "",
      // 显示搜索条件
      showSearch: true,
      // 弹出层标题
      titletype: "1",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},

      dialogFormVisible: false,

      formLabelWidth: "120px",
    };
  },
  created() {
    this.datumId = this.$route.query.id;

    this.page.datumId = this.datumId;
    this.getList(this.page);
  },
  mounted() {},
  methods: {
    handleSelectionChange(val) {
    
      //id处理
      this.userList = val.map((res) => res.userId).join();
    },
    // 新增创建
    addEditBtn() {
      let that = this;
      if (!that.userList) {
      
        that.$message({
          message: "请先选择！",
          type: "warning",
        });
      } else {
       
        addDatumUser({ datumId: that.datumId, userList: that.userList }).then(
          (res) => {
            that.$message({
              message: "恭喜你,新增成功",
              type: "success",
            });
            that.dialogVisibleOne = false;
            this.getList(this.page);
          },
          (err) => {
          
            that.$message({
              message: "很遗憾，新增失败",
              type: "error",
            });
          }
        );
      }
    },

    //修改创建
    addEditBtn1() {
      let that = this;
      updateDatumUser({
        userId: that.rowuserId,
        datumId: `${that.usernameform.userName}`,
      })
        .then((res) => {
          (res) => {
            that.$message({
              message: "恭喜你,修改成功",
              type: "success",
            });
          },
            (err) => {
              that.$message({
                message: "很遗憾，修改失败",
                type: "error",
              });
            };
        })
        .catch((e) => {
        
        })
        .finally((e) => {
          that.getList(that.page);
          this.dialogVisib = false;
        });
    },
    // 取消预览弹窗
    goHome() {
      this.dialogVisibleTwo = false;
    },
    //预览详情
    hadprive(row) {
    
      //   this.dialogVisibleTwo = true;
      this.titletype = "3";
      this.dialogVisibleOne = true;
      this.addEditform.id = row.id;
      this.addEditform.datum = row.datum;
      this.addEditform.datumName = row.datumName;
      this.addEditform.remark = row.remark;
    },

    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getList(this.page);
    },
    // 页数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList(this.page);
      // this.getList();
    },

    //新增分页
    handleCurrentChange1(val) {
      this.page1.pageNum = val;
      this.addgetList(this.page1);
    },
    // 页数
    handleSizeChange1(val) {
      this.page1.pageSize = val;
      this.addgetList(this.page1);
      // this.getList();
    },
    /** 用户分配后查询列表 */
    getList(val) {
     
      this.loading = true;
      datumUserList(val)
        .then((res) => {
          this.loading = false;
          this.total = res.total;
          this.tableData = res.rows;

        })
        .catch((e) => {
         
        });
    },

    /** 新增后列表 */
    addgetList(val) {
      this.loading = true;

      //
      alllist(val)
        .then((res) => {
          this.newarr = [];
          this.loading = false;
          this.total1 = res.total;
          this.tableData1 = res.rows;
          this.newarr = this.tableData1.filter(
            (i) => !this.tableData.some((j) => j.userId == i.userId)
          );
         
        })
        .catch((e) => {
        
        });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(this.page);
    },
    resetForm1() {
      this.page = {};
      this.getList(this.page);
    },
    /** 新增搜索按钮操作 */
    addhandleQuery() {
     
      this.addgetList(this.page1);
    },
    /** 重置按钮操作 */
    resetForm() {
      (this.page1.userName = ""), this.addgetList(this.page1);
    },

    /** 新增按钮操作 */
    getAdd() {
      this.addgetList(this.page1);
      this.userList = "";
      this.dialogVisibleOne = true;
    },

    /** 编辑按钮操作 */
    editBtn(row) {
      
      this.rowuserId = row.userId;

      this.dialogVisib = true;
     
      this.editgetList(this.page3);
      // this.addEditform.userId = row.userId;
    },
    /** 移除按钮操作 */
    handleDelete(row) {
    
      this.$confirm(
        '是否确认删除名称为"' + row.datumName + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deldatum(row.userId).then(() => {
            this.getList(this.page);
            this.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    /** 编辑--列表 */
    editgetList(val) {
    
      this.loading = true;
      quoteList(val)
        .then((res) => {
          let obj = res.rows;
          this.namelist = obj.map((res) => ({
            id: res.id,
            datumName: res.datumName,
          }));
         
        })
        .catch((e) => {
        
        });
    },
  },
};
</script>